<template>
    <div>
        <search
        ref="mysearch"
        @doReset="doReset"
        @doQuery="doRefresh"
        :ruleform="ruleForm"
        >
            <template slot="top">
                <el-form-item label="服务器名称：" prop="serverId">
                    <el-select v-model="ruleForm.serverId">
                        <el-option value="" label="全部"></el-option>
                        <el-option
                        v-for="(item,index) in serverList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否启用：" prop="enable">
                    <el-select v-model="ruleForm.enable">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="报警手机号：" prop="alarmCellPhone">
                    <el-select v-model="ruleForm.alarmCellPhone">
                        <el-option value="" label="全部"></el-option>
                        <el-option
                        v-for="(item,index) in phoneList"
                        :key="index"
                        :label="item.cellPhone"
                        :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="报警邮箱：" prop="alarmEmail">
                    <el-select v-model="ruleForm.alarmEmail">
                        <el-option value="" label="全部"></el-option>
                        <el-option
                        v-for="(item,index) in emailList"
                        :key="index"
                        :label="item.email"
                        :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间：" prop="time" class="dateTime">
                    <el-date-picker
                        v-model="ruleForm.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        >
                    </el-date-picker>
                </el-form-item>
            </template>
            <div slot="foot"></div>
        </search>
        <mytable ref="mytable"
            :config="tableconfig"
           >
            <div slot="mytablebody">
                <el-button type="primary" @click="getAdd('add')" size="small"  style="margin-bottom:24px">添加</el-button>
            </div>
            <!-- 启用 -->
            <template v-slot:enable="{ data }">
                <p v-if="data.enable == 1">是</p>
                <p v-else>否</p>
            </template>
            <!-- 操作 -->
            <template v-slot:operation="{ data }">
                <div class="operation">
                    <el-button type="text" size="small" @click="getLook(data)">查看</el-button>
                    <el-button type="text" size="small" @click="getAdd('edit',data)">编辑</el-button>
                    <el-button type="text" size="small" @click="getDel(data)">删除</el-button>
                    <el-button type="text" size="small" @click="getCarry(data)">执行</el-button>
                </div>
            </template>
        </mytable>
        <!-- 新增 -->
        <el-dialog :title="key=='add'?'添加任务':'编辑任务'" :visible.sync="dialogAddVisible" width="32%" @close="closeDialog" class="addDialog">
            <el-form :model="addForm" ref="addForm" :rules="addRules" class="add_form">
                <el-form-item label="服务器名称：" :label-width="formLabelWidth" prop="serverId">
                    <el-select v-model="addForm.serverId" style="width:100%" size="small">
                        <el-option
                        v-for="(item,index) in serverList"
                        :key="index"
                        :label="item.name"
                        :value="parseInt(item.id)"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="调度表达式：" :label-width="formLabelWidth" prop="scheduleExpression">
                    <el-input v-model="addForm.scheduleExpression" size="small"></el-input>
                </el-form-item>
                <el-form-item label="报警邮箱：" :label-width="formLabelWidth" prop="alarmEmail">
                    <el-select v-model="addForm.alarmEmail" style="width:100%" size="small">
                        <el-option
                        v-for="(item,index) in emailList"
                        :key="index"
                        :label="item.email"
                        :value="item.id +''"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="报警手机号：" :label-width="formLabelWidth" prop="alarmCellPhone">
                    <el-select v-model="addForm.alarmCellPhone" style="width:100%" size="small">
                        <el-option
                        v-for="(item,index) in phoneList"
                        :key="index"
                        :label="item.cellPhone"
                        :value="item.id + ''"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否启用：" :label-width="formLabelWidth" prop="enable">
                    <el-select v-model="addForm.enable" style="width:100%" size="small">
                        <el-option label="是" :value="1"></el-option>
                        <el-option label="否" :value="0"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="getAddSumbit('addForm',key)" size="small">确 定</el-button>
                <el-button @click="dialogAddVisible = false" size="small">取 消</el-button>
                
            </div>
        </el-dialog>
        <!-- 查看 -->
        <drawer
            ref="drawer"
            :data="selectItem"
            title="任务详情"
            :columns="columns"
        ></drawer>
        <!-- 删除 -->
        <el-dialog title="" :visible.sync="dialogDelVisible" width="25%" class="delDialog">
            <div slot="title" class="postion">
                <i class="el-icon-warning"></i>
                <span class="download">确认删除该条记录？</span>
            </div>
            <!-- <div class="tit">您是否删除数据？</div> -->
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="getDelSumbit" size="small">确 定</el-button>
                <el-button @click="dialogDelVisible = false" size="small">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import drawer from "@/components/drawer.vue";
import search from '@/components/search.vue';
import mytable from '@/components/table.vue';
import { serviceLookColumns} from "@/views/controlSystem/data/configData";
import {serveTaskList,addserveTask,serveTaskInfo,updateserveTask,deletServeTask,queryAlarmCellPhoneList,queryAlarmEmailList,queryServerInfoList,executeTask} from '@/api/serverMonitor'
export default{
    components:{
        search,
        mytable,
        drawer
    },
    data(){
        return{
            ruleForm:{
                serverId:'',
                enable:'',
                alarmEmail:'',
                alarmCellPhone:'',
                startTime:'',
                endTime:'',
                isMain:false,
                time:[],
                pageNo:1,
                pageSize:20,
            },
            phoneList:[],
            emailList:[],
            serverList:[],
            tableconfig: {
                loading: false,
                isselection: false,
                ispagination: true,
                tabledata: [
                ],
                isindex: true,
                thead: [
                { sort: null, label: "服务器名称",prop: "name", width: 150 },
                { sort: null, label: "调度表达式", prop: "scheduleExpression" },
                {sort: null,label: "是否启用", prop: "enable",type: "slot",width:100},
                {sort: null,label: "报警邮箱", prop: "alarmEmail",},
                {sort: null,label: "报警手机号", prop: "alarmCellPhone",},
                { sort: null, label: "创建时间", prop: "createTime" },
                { sort: null, label: "操作", prop: "operation",type: "slot",width:200 },
                ],
                currentpage: 1,
                pagesize: 0,
                total: 0,
            },
            dialogAddVisible:false,
            dialogLookVisible:false,
            dialogEditVisible:false,
            dialogDelVisible:false,
            formLabelWidth: '120px',
            addForm:{
                serverId:"",
                scheduleExpression:"",
                alarmEmail:'',
                jobHandler:'',
                alarmCellPhone:'',
                enable:'',
            },
            addRules:{
                serverId:[
                    { required: true, message: '请选择服务器名称', trigger: 'change' }, 
                ],
                scheduleExpression:[
                    { required: true, message: '请输入调度表达式', trigger: 'blur' }, 
                ],
                alarmEmail: [
                    { required: true, message: '请选择报警邮箱地址', trigger: 'change' },
                ],
                alarmCellPhone: [
                    { required: true, message: '请选择报警手机号', trigger: 'change' },
                ],
            },
            selectItem:'',
            columns:serviceLookColumns,
            key:'',
            delVal:'',
        }
    },
    methods:{
        // 重置搜索
        doReset() {
            Object.keys(this.ruleForm).slice(0, -4).map((x) => {
                this.ruleForm[x] = "";
            });
            console.log(this.ruleForm, "this.ruleForm.pageSize");
            this.ruleForm.time = [];
            // this.$message({
            //     message: "已重置",
            //     type: "success",
            // });
            this.doRefresh();
        },
        // 刷新
        doRefresh() {
            //页码从第一页开始
            this.tableconfig.currentpage = 1;
            this.ruleForm.pageNo = 1;
            //表格回到顶部
            this.$refs.mytable.$emit("handleGoTop");
            this.doQuery();
        },
        async doQuery() {
        // 获取表格
            this.tableconfig.loading = true;
            this.tableconfig.currentpage = this.ruleForm.pageNo;
            this.tableconfig.pagesize = this.ruleForm.pageSize;
            this.ruleForm.startTime = this.ruleForm.time[0];
            this.ruleForm.endTime = this.ruleForm.time[1];
            let data1 = await serveTaskList(this.ruleForm);
            console.log(data1);
            if (data1.success) {
                this.tableconfig.total = data1.result.total;
                this.tableconfig.tabledata = data1.result.list;
                this.ruleForm.isMain = false;
            }
            this.tableconfig.loading = false;
        },
        // 页码数更新
        handleSizeChange(val) {
            this.ruleForm.pageNo = 1;
            this.ruleForm.pageSize = val;
            this.doQuery();
            //表格回到顶部
            this.$refs.mytable.$emit('handleGoTop');
        },
        // 当前页码更新
        handleCurrentChange(val) {
            this.ruleForm.pageNo = val;
            console.log(this.ruleForm.pageNo,'this.tableconfig.currentpage');
            this.doQuery();
            //表格回到顶部
            this.$refs.mytable.$emit('handleGoTop');
        },
        getAdd(index,date){
            this.key = index;
            if(this.key== 'edit'){
                serveTaskInfo(date.id).then(res=>{
                    if(res.success){
                        this.addForm=res.result
                    }
                })
            }
            this.dialogAddVisible=true;
        },
        getLook(data){
            this.selectItem = data;
            if(this.selectItem.enable == 1){
                this.selectItem.enable= '是'
            }else{
                this.selectItem.enable= '否'
            }

            this.$refs.drawer.open(this.selectItem);
        },
        getDel(date){
            this.delVal = date.id;
            this.dialogDelVisible = true;
        },
        getAddSumbit(formName,key) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(key == 'add'){
                        addserveTask(this.addForm).then(res=>{
                            console.log(res,'rrrrrrrrrr');
                            if(res.success){
                                if(res.result){
                                    this.$message.success(res.message);
                                    this.ruleForm.isMain = true;
                                    this.doQuery();
                                    this.dialogAddVisible = false;
                                }else{
                                    this.$message.error(res.message);
                                    return false;
                                }
                            }else{
                                this.$message.error(res.message)
                            }
                        })
                    }else{
                        updateserveTask(this.addForm).then(res=>{
                            console.log(res,'rrrrrrrrr');
                            if(res.success){
                                if(res.result){
                                    this.$message.success(res.message);
                                    this.ruleForm.isMain = true;
                                    this.doQuery();
                                    this.dialogAddVisible = false;
                                }else{
                                    this.$message.error(res.message);
                                    return false;
                                }
                            }else{
                                this.$message.error(res.message)
                            }
                        })
                    }
                } else {
                    return false;
                }
            });
        },
        closeDialog(){
            this.$refs.addForm.resetFields();
        },
        getDelSumbit() {
            deletServeTask(this.delVal).then(res=>{
                if(res.success){
                    if(res.result){
                        this.$message.success(res.message);
                        this.ruleForm.isMain = true;
                        this.doRefresh();
                        this.dialogDelVisible = false;
                    }else{
                        this.$message.error(res.message);
                        
                    }
                }else{
                    this.$message.error(res.message);
                }
            })
        },
        getCarry(data){
            console.log(data,'datadata');
            executeTask(data.id).then(res=>{
                console.log(res,'rewssssss');
                if(res.result){
                    this.$message.success('此服务器已执行')
                }else{
                    this.$message.error('此服务器无法执行')
                }
            })
        },
        getDataList(){
            queryAlarmCellPhoneList().then(res=>{
                if(res.code == 200){
                    this.phoneList = res.result;
                }
            })
            queryAlarmEmailList().then(res=>{
                if(res.code == 200){
                    this.emailList = res.result;
                }
            })
            queryServerInfoList().then(res=>{
                if(res.code == 200){
                    this.serverList = res.result;
                }
            })

        }
    },
    created(){
        this.doQuery();
        this.getDataList();
    },
}
</script>
<style lang="scss" scoped>
.add_form{
    width: 80%;
    margin: auto;
    ::v-deep .el-form-item::before{
        margin-left: 4px;
        .el-input__inner {
            font-size: 14px !important;
        }
    }
    ::v-deep .el-form-item__label{
        text-align: left !important;
        padding: 0;
    }
    ::v-deep .el-input--small .el-input__inner {
        font-size: 14px !important;
        font-weight: 400 !important;
    }
    ::v-deep .el-button--text{
        font-weight: 400;
    }
}
  .el-button--primary{
    background-color: #3C77FF;
    border-color: #3C77FF;
    }
    .el-button--text{
        color: #3C77FF;
        font-weight: 400;
    }
    .el-button.is-plain:focus, .el-button.is-plain:hover {
        background: #FFF;
        border-color: #3C77FF;
        color: #3C77FF;
    }
    .el-form-item.is-required ::v-deep .el-form-item__label:before {
        content: '*';
        color: #F56C6C;
        margin-right: 4px;
    }
    .el-form-item ::v-deep .el-form-item__label:before {
        content: '';
        margin-right: 8px;
    }
    .dialog-footer{
        text-align: center;
    }
    .tit{
        font-size: 18px;
        font-weight: 600;
        text-align: center;
    }
    ::v-deep .el-descriptions-item__container{
        // text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
   ::v-deep .el-descriptions-item__label:not(.is-bordered-label){
        font-size: 16px !important;
        color: #000 !important;

    }
    .addDialog{
        ::v-deep .el-dialog__header {
            padding: 20px 0px 10px;
            border-bottom: 1px solid #DDDDDD;
            margin: 0 20px;
            font-size: 16px;
            font-weight: 600;
            color: #333333;
            line-height: 24px;
        }
        ::v-deep .el-dialog__body {
            // padding-top: 15px;
            padding: 15px 20px;
            color: #606266;
            font-size: 14px;
            .el-form-item{
                margin-bottom: 15px;
            }
        
        }

    }
    .delDialog{
      ::v-deep .el-dialog{
        margin-top: 38vh !important;
        border-radius: 6px;
      }
        ::v-deep .el-dialog__body{
            padding: 0;
        }
        .postion {
            color: #FAAD14;
            font-size: 24px;
            display: flex;
            align-items: center;
        }
        .download{
            font-size: 16px;
            font-weight: 500;
            color: rgba(0,0,0,0.88);
            line-height: 24px;
            margin-left: 10px;
        }
        .dialog-footer{
            text-align: right;
        }
    }
    
    
</style>